<template>
  <div>
    <z-table
      bordered
      ref="table"
      rowKey="rowKey"
      :showAlert="false"
      :showSelection="false"
      :loading="loading"
      :columns="columns"
      :dataSource="pageData"
      @selectedRow="onSelectedRow"
      @change="onTableChange"
    >
      <template slot="action" slot-scope="text, record">
        <a @click="hrefFun(record.approvalFrom)" v-if="record.approvalFrom !== ''">《社区戒毒社区康复人员外出请假审批表》</a><br>
        <a @click="hrefFun(record.notice)" v-if="record.notice !== ''">《社区戒毒社区康复人员外出准假通知书》</a><br>
      </template>
    </z-table>
  </div>
</template>

<script>
/*
变更执行地
 */
import {getChangeList, getOutLeaveList} from "@api/sjsk/archives";

export default {
  data(){
    return {
      pageData:undefined,
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => {
            return `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          }
        },
        {
          title: '活动范围',
          dataIndex: 'activityScope',
          width: 100,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '请假开始时间',
          dataIndex: 'startDate',
          width: 100,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '请假结束时间',
          dataIndex: 'endDate',
          width: 80,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '请假时长',
          dataIndex: 'outDay',
          width: 100,
          align: 'center',
        },
        {
          title: '请假事由',
          dataIndex: 'outReason',
          width: 80,
          align: 'center'
        },
        {
          title: '是否提前销假',
          dataIndex: 'isAdvance',
          width: 80,
          align: 'center',
          customRender: function (text) {
            if (text == 1) {
              return "是";
            } else if (text == 2) {
              return "否";
            } else {
              return text;
            }
          }
        },
        {
          title: '提前销假',
          dataIndex: 'cancelLeave',
          width: 80,
          align: 'center'
        },
        {
          title: '附件',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
    }
  },
  methods:{
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    hrefFun(val){
      window.open(val)
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable(){
      getOutLeaveList({sjskPersonId:'2'}).then(ser => {
        if(ser.success){
          this.pageData = ser.result
          console.log(this.pageData)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>

</style>